<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-21 19:03:36
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-06 10:53:41
 * @FilePath: /XMate-h5/src/components/choosePeople/components/ListItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="flex items-center px-4 py-2 bg-white mb-[1px] max-w-[100%] ml-2"
    @click="handleClick"
  >
    <!-- 选择框（仅对人员显示） -->
    <van-checkbox
      :model-value="cp_selected"
      class="mr-3"
      shape="square"
      checked-color="#436BFF"
      @click.stop="handleSelect"
      v-if="item.type === 'staff'"
    />

    <!-- 头像 -->
    <AvatarDisplay
      :item="item"
      :get-avatar-color="getAvatarColor"
      :get-initial="
        isDept ? getDepartmentInitial : getNameInitial
      "
    />

    <!-- 信息区域 -->
    <div class="flex flex-row items-center justify-between  flex-1 ">
      <div class="flex flex-col ">
        <div class="text-[#262626] text-base leading-6">
          {{ item.name }}
        </div>
        <div
          v-if="item.type === 'staff' && item.title"
          class="text-[#8C8C8C] text-sm leading-5 "
        >
          {{ item.title }}
        </div>
      </div>

      <van-icon v-if="isDept" name="arrow" color="gray"></van-icon>

    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  selected: {
    type: Boolean,
    default: false
  },
  getAvatarColor: {
    type: Function,
    required: true
  },
  getDepartmentInitial: {
    type: Function,
    required: true
  },
  getNameInitial: {
    type: Function,
    required: true
  }
});

const isDept = computed(() => props.item.type === 'department');
const emit = defineEmits(["click", "select"]);

const cp_selected = computed({
  get() {
    return props.selected;
  },
  set() {
    emit("select", { ...props.item });
  }
});

// 处理点击事件
function handleClick() {
  if (props.item.type === "department") {
    emit("click", props.item);
  } else {
    handleSelect();
  }
}

// 处理选择事件
function handleSelect() {
  if (props.item.type === "staff") {
    emit("select", { ...props.item });
  }
}
</script>
